<template>
  <el-tabs :tab-position="tabPosition" style="height: 440px;">
    <el-tab-pane v-if="this.$store.state.user.roleName === '学生'" label="考勤记录" >
      <el-table
        ref="filterTable"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
        :default-sort="{prop:'ask_Id',order:'descending'}"
        stripe
        @selection-change="selected"
        max-height="1000"
      >
        <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="userName" label="用户账号" width="150"></el-table-column>
      <el-table-column fixed prop="nickName" label="用户姓名" width="150"></el-table-column>
      <el-table-column prop="attendanceTime" :formatter="dateFormat" sortable label="考勤时间" width="150"></el-table-column>
      <el-table-column sortable v-if="false" prop="attendance_Id" label="考勤id" width="150"></el-table-column>
      <el-table-column sortable v-if="false" prop="user_Id" label="用户id" width="150"></el-table-column>
      <el-table-column prop="attendanceStatus" label="考勤状态" width="150"></el-table-column>
      <el-table-column prop="cause" label="未到原因" width="200"></el-table-column>
      <el-table-column prop="comment" label="备注" width="150"></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="currentPage"
          :page-sizes="[3,6,8,10,20,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </el-tab-pane>

  </el-tabs>
</template>
<script>
import moment from 'moment'
export default {
  inject: ['reload'],
  data () {
    return {
      userId: this.$store.state.user.userId,
      pageSize: 6,
      currentPage: 1,
      tableData: [],
      selectedCheckBox: [],
      tabPosition: 'top' // tab标签位置

    }
  },
  created () {
    this.initData()
    this.getStudentData()
    this.roleSelect()
  },
  methods: {
    selected: function (value) {
      // 复选框获取已经被选择的记录
      this.selectedCheckBox = value
    },
    dateFormat (row, column) {
      // 修改时间格式
      var date = row[column.property]

      if (date === undefined) {
        return ''
      } else if (date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    initData () {
      // 初始化数据
      this.$axios
        .post('/attendances/attendanceByUserId', {
          json: this.userId
        })
        .then(response => (this.tableData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    }
  }
}
</script>
